import { observer } from 'mobx-react-lite';
import Navbar from '@/components/Navbar';
import systemStore from '@/stores/SystemStore';
import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import HouseLeaseBusiness from '@/business/HouseLeaseBusiness';
import userStore from '@/stores/UserStore';
import { LeaseEntity } from '@/entities/LeaseEntity';
import EmptyComp from '@/components/Empty';
import HouseCard from '@/components/HouseCard';
import './index.less';
import ButtonComp from '@/components/Button';
import { navigateTo } from '@tarojs/taro';
import HouseCommentBusiness from '@/business/HouseCommentBusiness';
import { CommentEntity } from '@/entities/CommentEntity';

function TenantRefundHistory() {
  const {user} = userStore;
  const [leaseRefundList, setLeaseRefundList] = useState<LeaseEntity.IHouseLease[]>();
  const [commentList, setCommentList] = useState<CommentEntity.IComment[]>();
  /**
   * 获取退租列表
   * @param tenantId 租客id
   */
  const getRefundHistory = async (tenantId: number) => {
    if (!user?.id) return;
    // 获取退租的租赁信息
    const leaseRefundList: any = await HouseLeaseBusiness.getTenantRefundHistory(tenantId);
    setLeaseRefundList(leaseRefundList);
  };
  
  /**
   * 获取当前租客的评论
   * @param tenantId 
   */
  const getComment = async (tenantId: number) => {
    if (!user?.id) return;
    const houseComment: any = await HouseCommentBusiness.getCommentByTenantId(tenantId);
    setCommentList(houseComment);
  };
  
  useEffect(() => {
    getRefundHistory(user.id);
    getComment(user.id);
  }, []);

  /**
   * 去评论
   * @param lease
   * @param isComment 是否已经评论
   */
  const toCommentHouse = (lease: LeaseEntity.IHouseLease, isComment: boolean) => {
    const {houseName, houseId, landlordId, tenantId, leaseId} = lease;
    isComment ?
      navigateTo({
        url: `/pages/houseAllComment/index?houseId=${ houseId }&houseName=${ houseName }&tenantId=${ tenantId }&leaseId=${ leaseId }`
      }) :
      navigateTo({
        url: `/pages/commentHouse/index?houseId=${ houseId }&landlordId=${ landlordId }&leaseId=${ leaseId }&houseName=${ houseName }`
      });
  };

  return (
    <Navbar
      title='租房历史'
      mode='back'
      bgColor='var(--mini-first)'
    >
      <View
        className='tenant-refund-history-container home-container'
        style={ {height: systemStore.haveNavbarNotTabbarHeight} }
      >
        {
          leaseRefundList?.length ?
            leaseRefundList?.map((leaseRefund: LeaseEntity.IHouseLease, idx: number) => {
              const {
                houseName,
                landlordImg,
                landlordName,
                houseImg,
                price,
                updatedAt,
                provinceName,
                cityName,
                areaName,
                addressInfo,
                leaseId,
              } = leaseRefund;
              const currentComment = commentList?.find(c => c.leaseId === leaseId);
              return (
                <HouseCard
                  key={ idx }
                  houseName={ houseName }
                  landlordImg={ landlordImg }
                  landlordName={ landlordName }
                  houseImg={ JSON.parse(houseImg)[0] }
                  housePrice={ price }
                  date={ updatedAt }
                  dateText='退租时间：'
                  statusText='已退租'
                  statusBg='var(--mini-fifth)'
                  address={ `${ provinceName }${ cityName }${ areaName }${ addressInfo }` }
                  isFooterSlot={ true }
                  FooterSlotComponent={
                    <View className='flex justify-center'>
                      <ButtonComp
                        title={ currentComment ? '查看评论' : '评价' }
                        className='comment-btn'
                        bgColor={ currentComment ? 'var(--bg-fourth)' : 'var(--mini-first)' }
                        onClick={ () => toCommentHouse(leaseRefund, !!currentComment) }
                      />
                    </View>
                  }
                />
              );
            }) : <EmptyComp text='暂无租房历史'/>
        }
      </View>
    </Navbar>
  );
}


export default observer(TenantRefundHistory);